<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('行业类型')">
        <dictSelect
          v-model="queryParams.industry"
          dictionary="industry_statistics"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle()">{{ $t("搜索") }}</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col v-loading="loadChart" :span="8" style="min-height:300px;position: relative;">
        <div class="box-shadow-list pad15 mr20">
          <div class="area-header">
            <span class="area-header-title">
              {{ $t('行业统计') }}
              <el-tooltip :content="$t('仅统计投后项目')" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
          </div>
          <Empty :data="chartData.datas">
            <pieChart v-if="chartData.datas.length > 0" :chart-data="chartData" @xData="handleTooltipClick" />
          </Empty>
        </div>
        <!--<map-view />-->
      </el-col>
      <el-col :span="16">
        <!-- <div class="area-header">
          <span class="area-header-title">{{ $t('项目详情') }}</span>
        </div> -->
        <el-table v-loading="loading" :data="tableList" border>
          <el-table-column :label="$t('项目名称')" show-overflow-tooltip align="center" prop="dealName">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('负责人')" align="center" prop="personChargeName" show-overflow-tooltip width="110" />
          <el-table-column :label="$t('项目聚焦行业')" align="center" prop="industryFocusName" show-overflow-tooltip width="120">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.industryFocusName) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columnType === 'deal'" :label="$t('细分行业')" align="center" prop="industryFocusTwo" show-overflow-tooltip width="120">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.industryFocusTwo) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else :label="$t('标的一级行业')" align="center" prop="industryName" show-overflow-tooltip width="120">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.industryName) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('投资金额') + $t('金额单位')" align="center" prop="investAmount" show-overflow-tooltip width="110">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.investAmount, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('持股比例(%)')" align="center" prop="shareholdingRatio" width="110" />
        </el-table>
      </el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="pageData"
    />
  </div>
</template>

<script>
    import pieChart from '@/views/chart/pieChart.vue'
    import { countIndustryFocus, findByIndustryFocus } from '@/api/base/deal/dealBase'
    export default {
      components: {
        pieChart
      },
      data() {
          return {
            chartData: {
              datas: []
            },
            tableList: [],
            total: 0,
            params: {
              pageNum: 1,
              pageSize: 10,
              industryFocus: undefined,
              type: ''
            },
            // 记录上一次点击事件传的参数值
            previousVal: undefined,
            loading: false,
            columnType: undefined,
            emptyShow: false,
            loadChart: false,
            industry: '',
            queryParams: {
              industry: undefined
            },
            typeList: []
          }
      },
      created() {
        this.getDicts('industry_statistics').then(response => {
          this.typeList = response.data
          this.queryParams.industry = this.typeList[0].dictValue
          this.getList()
           this.pageData()
        })
      },
      mounted() {
        this.$bus.$emit('async_done')
      },
      methods: {
        getList() {
          this.loadChart = true
          this.emptyShow = false
          countIndustryFocus(this.queryParams.industry).then(response => {
            this.loadChart = false
            if (response.data && response.data.length > 0) {
              this.chartData = {
                center: ['50%', '40%'],
                datas: response.data
              }
              this.chartData.datas = this.chartData.datas.map(ele => { return { value: ele.dealNums, name: this.$t(ele.dictLabel), type: ele.dictValue } })
            } else {
              this.chartData = {
                datas: []
              }
              this.emptyShow = true
            }
          })
        },
        // 点击饼图根据点击的类型查询
        handleTooltipClick(val) {
          this.loading = true
          if (val) {
            this.params.industryFocus = val.type
          }
          if (this.previousVal === this.params.industryFocus) {
            this.params.industryFocus = undefined
          }
          this.pageData()
          this.previousVal = this.params.industryFocus
        },
        // 点击分页查询
        pageData() {
          this.loading = true
          this.params.type = this.queryParams.industry
          findByIndustryFocus(this.params).then(response => {
            this.tableList = response.rows
            this.total = response.total
            this.tableList && this.tableList.forEach(item => {
              if (item.columnType === 'deal') {
                this.columnType = item.columnType
              }
            })
            // console.log(response)
            this.loading = false
          })
        },
        queryHandle() {
            this.getList()
            this.pageData()
        }
      }
    }
</script>

<style scoped>

</style>
